<template>
    <div class="home">
        <van-nav-bar
        title="乐购商城"
        />
        <router-view></router-view>
        <van-tabbar v-model="active" active-color="#FF9801"  inactive-color="#000" @change="changebutton">
            <van-tabbar-item name="首页" class="iconfont icon-ziyuan">首页</van-tabbar-item>
            <van-tabbar-item name="分类" class="iconfont icon-cart_icon">分类</van-tabbar-item>
            <van-tabbar-item name="购物车" class="iconfont icon-wode">购物车</van-tabbar-item>
            <van-tabbar-item name="我的" class="iconfont icon-fenlei">我的</van-tabbar-item>
        </van-tabbar>
    </div>
</template>

<script>
export default {
    name:"home",
    data(){
        return {
            active: 'home',
        }
    },
    methods:{
        changebutton(){
             switch(this.active){
                case '首页':
                this.$router.push('/index');
                break;
                case '分类':
                this.$router.push({path:'/category'});
                break;
                case '购物车':
                this.$router.push({path:'/cart'});
                break;
                case '我的':
                this.$router.push({path:'/my'});
                break;
            }
        }
    }
}
</script>

<style lang="scss">
@import './../assets/scss/config.scss';
    .home{
        .van-nav-bar{
           background:$colorA;
           div{
               color:$colorG;
           }
        }
        .van-tabbar-item__text{
            font-size: 0.32rem;
        }
    }
</style>

